<template>
  <div class="singer">
    <theme-header-small title="入驻歌手" more="查看全部&gt" />

    <div class="singer-list">
      <template
        v-for="item in settleSingers"
      >
        <a class="item" href="javascript:;">
          <img :src="formatImageSize(item.img1v1Url, 62)" :alt="item.name">
          
          <div class="info">
            <div class="title">
              {{ item.alias.join("") || item.name }}
            </div>
            <div class="name">{{item.name}}</div>
          </div>
        </a>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import { useStore } from "@/store";

import { useState } from "@/hooks";
import { formatImageSize } from "@/utils/format-utils";

import ThemeHeaderSmall from "@/components/theme-header-small/index.vue";

export default defineComponent({
  components: {
    ThemeHeaderSmall
  },
  setup() {
    const store = useStore();

    const { settleSingers } = useState("recommend", ["settleSingers"]);

    onMounted(() => {
      store.dispatch("recommend/getSettleSingersAction", {limit: 5, cat: 5001})
    })

    return {
      settleSingers,
      formatImageSize
    }
  }
})
</script>

<style lang="less" scoped>
.singer {
  padding: 20px;

  .singer-list {
    .item {
      display: flex;
      height: 62px;
      margin-top: 14px;
      background-color: #fafafa;
      &:hover {
        background-color: #f4f4f4;
      }

      img {
        width: 62px;
        height: 62px;
      }

      .info {
        margin: 8px 0 0 10px;
        .title {
          color: #333;
          font-size: 14px;
          font-weight: 700;
        }

        .name {
          margin-top: 5px;
        }
      }
    }
  }
}
</style>